<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head th:insert="~{admin/commons_admin::head}">
    <title>后台模板管理系统</title>
  <style type="text/css">
    /* Chart.js */

    @-webkit-keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    @keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    .chartjs-render-monitor {
      -webkit-animation: chartjs-render-animation 0.001s;
      animation: chartjs-render-animation 0.001s;
    }
  </style>
</head>

<body>
<!--通用顶栏-->
<div th:insert="~{admin/commons_admin::top_menu}"></div>

<!--主体-->
<div id="content">
    <!--侧边栏-->
    <div class="left_menu" th:replace="~{admin/commons_admin::left_menu}"></div>

    <div class="m-right">

        <div class="right-nav">
            <ul>
                <li style="margin-left:25px;">您当前的位置：</li>
                <li><a href="#">首页</a></li>
            </ul>
        </div>

        <!--主体内容-->
        <div class="main">
            <div style="height: 3rem"></div>
            <div class="chartjs-size-monitor"
                 style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                <div class="chartjs-size-monitor-expand"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                </div>
                <div class="chartjs-size-monitor-shrink"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom" style="margin-top: -3rem">
                <h1 class="h2" style="margin-left: 2rem">本周访问量</h1>
            </div>

            <canvas class="my-4 chartjs-render-monitor" id="myChart" width="800" height="300"
                    style="display: block; width: 1076px; height: 454px;"></canvas>

        </div>

    </div>
</div>


<!--通用footer-->
<div th:insert="~{admin/commons_admin::footer}"></div>


<!-- Icons -->
<script type="text/javascript" th:src="@{/asserts/js/feather.min.js}" ></script>
<script>
  feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" th:src="@{/asserts/js/Chart.min.js}" ></script>
<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [ "周一", "周二", "周三", "周四", "周五", "周六","周日"],
      datasets: [{
        data: [182, 395, 602, 445, 612, 483, 542],
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: 'green',
        borderWidth: 4,
        pointBackgroundColor: '#007bff'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false,
      }
    }
  });
  myChart.data.datasets[0].data = [252, 395, 602, 445, 612, 483, 542];

</script>
</body>
</html>
